<!--
 * @Author: Wangtao
 * @Date: 2020-09-21 09:55:09
 * @LastEditors: Wangtao
 * @LastEditTime: 2022-06-06 20:13:00
-->
<template>
  <div class="search-checkbox">
    <div class="search-header">
      {{title}}
    </div>
    <el-input placeholder="请输入搜索内容" v-model="filterText" size="mini">
      <i slot="prefix" class="el-input__icon el-icon-search"></i>
    </el-input>
    <draggable v-model="DataList" :handle="'.V7_iconfont'" @end="dragEnd" class="draggable-box">
      <div
        v-for="(item, index) in DataList"
        :key="index"
        v-show="item.label && item.label.indexOf(filterText) > -1 && !item.disenable"
        class="search-list"
      >
        <i class="V7_iconfont V7_iconV7tubiao_yidong"></i
        ><el-checkbox
          v-model="item.show"
          @change="checkChange(item)"
          size="mini"
          :disabled="(item.show && checkBoxDisable) || item.disabled"
        >
          {{ item.label }}
        </el-checkbox>
      </div>
    </draggable>
  </div>
</template>

<script lang="ts">
import { deepClone } from '@/utils/common'
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import draggable from 'vuedraggable'
@Component({
  name: 'SearchCheckbox',
  components: {
    draggable
  }
})
export default class SearchCheckbox extends Vue {
  @Prop({ default: () => [] }) private data!: any[]
  @Prop({ default: () => '自定义表头' }) private title: string | undefined
  // header list
  private DataList = []
  // 过滤值
  private filterText = ''

  @Watch('data')
  private dataChange () {
    this.initChecked()
  }

  get checkBoxDisable () {
    let num = 0
    let disenableNum = 1
    this.DataList.some((item: any) => {
      if (item.disenable) {
        disenableNum++
      }
      if (item.show) {
        num++
      }
    })
    return num === disenableNum
  }

  private mounted () {
    this.initChecked()
  }

  private isVisible (filterText) {
    return this.filterText.indexOf(filterText) > -1
  }

  private checkChange (data) {
    this.$emit('check-change', this.DataList, null, data)
  }

  private getArrayIndex (array, value) {
    let aIndex = -1
    array.some((item, index) => {
      if (item === value) {
        aIndex = index
        return true
      }
    })
    return aIndex
  }

  private initChecked () {
    const DataList = deepClone(this.data)
    DataList.forEach(item => {
      // eslint-disable-next-line no-prototype-builtins
      if (typeof item !== 'string' && !item.hasOwnProperty('show')) {
        item.show = true
      }
    })
    this.DataList = DataList
    this.$emit('check-change', DataList, true)
  }

  private dragEnd () {
    this.$emit('check-change', this.DataList)
  }
}
</script>

<style lang="stylus" scoped>
  $font-size = 12px
  .draggable-box
    max-height  250px
    overflow-y scroll
  .search-checkbox
    >>> .el-checkbox__input.is-checked + .el-checkbox__label
      color $fc-gray3
    >>> .el-checkbox__label
      font-size $font-size
    color $fc-gray4
    padding 0 12px 12px
    .search-list
      color $fc-gray3
      margin-top 10px
      display flex
      align-items center
    .search-header
      padding 0 0 12px
      font-weight bold
      color $fc-gray2
      border-bottom 1px solid $border-main
      margin-bottom 10px
    .V7_iconfont
      cursor move
      margin-right 10px
      font-size $font-size
</style>
